{% extends "base.html" %}
{% load static %}

{% block title %}湘行{% endblock %}

{% block extra_css %}
<style>
    /* 搜索页面特有样式 */
    body{
        margin: 0;
        background-image: url("{% static 'img/5.jpg' %}"); /* 替换为凤凰古城全景图 */
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        font-family: "Noto Serif SC", serif;
    }

    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.7); /* 调整遮罩透明度 */
        z-index: -1;
    }

    /* 1. AI推荐线路模块样式 */
    .slider{
        height: auto;
        padding: 0;
        margin: 0;
    }

    .slider .routes{
        float: none;
        margin: 0;
        height: auto;
        min-height: 280px;
        width: 220px;
        border: 1px solid var(--wood-tone);
        padding: 15px;
        background-color: rgba(255, 255, 255, 0.9);
        background-repeat: no-repeat;
        background-position: bottom right;
        background-size: 120px 100px;
        border-radius: 8px;
        position: relative;
    }

    .slider .routes a{
        display: inline-block;
        padding: 0 10px;
        color: var(--primary-green);
        font-size: 16px;
        text-decoration: none;
        width: 100%;
        margin-bottom: 10px;
    }

    .slider .routes a:first-child {
        font-weight: bold;
        font-size: 18px;
        color: var(--primary-brown);
        margin-bottom: 15px;
    }

    .slider .routes a:last-child {
        position: absolute;
        bottom: 15px;
        left: 50%;
        transform: translateX(-50%);
        margin-left: 0;
        text-decoration: none;
        color: var(--accent-blue);
        font-weight: bold;
    }

    .slider .routes a:last-child:hover{
        color: var(--accent-red);
    }

    /* 2. Flex容器样式 - AI推荐在右侧 */
    .filter-and-recommend-container {
        position: fixed;
        bottom: 120px;
        width: 70%;
        left: 50%;
        transform: translateX(-50%);
        padding: 10px 0;
        display: flex; /* 开启Flex布局 */
        gap: 20px; /* 两个模块之间留间距 */
        align-items: flex-start;
        z-index: 100;
    }

    /* 3. 搜索容器样式 */
    .search-container {
        position: fixed;
        bottom: 0;
        width: 70%;
        left: 50%;
        border-radius: 6px;
        transform: translateX(-50%);
        padding: 10px;
        background: rgba(240, 240, 240, 0.85);
        display: flex;
        align-items: center;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    }

    .search-container::after {
        content: "";
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 100%;
        height: 3px;
        background-image: url("{% static 'img/wave-pattern.png' %}"); /* 水波纹图案 */
        background-repeat: repeat-x;
    }

    .search-input {
        flex: 1;
        padding: 14px;
        border: 1px solid var(--wood-tone);
        border-radius: 4px;
        margin-right: 10px;
        height: 90px;
        white-space: pre-line;
        overflow-y: auto;
        background: rgba(255, 255, 255, 0.8);
    }

    .search-btn {
        width: 80px;
        padding: 15px;
        background-image: linear-gradient(to bottom, #A67C52, var(--primary-brown));
        color: white;
        border: 1px solid #794426;
        border-radius: 6px;
        cursor: pointer;
        text-align: center;
        transition: all 0.3s;
    }

    .search-btn:hover {
        background-image: linear-gradient(to bottom, #B8860B, #CD853F);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    /* 4. 筛选框容器样式 */
    .filter-container {
        position: static;
        bottom: auto;
        left: auto;
        transform: none;
        width: 60%; /* 筛选框占主要宽度 */
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
        z-index: 100;
    }

    .filter-row {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 10px;
        border: 1px solid var(--wood-tone);
        border-radius: 6px;
        background-color: rgba(255, 255, 255, 0.85);
    }

    .filter-label {
        width: 100px;
        padding: 8px 16px;
        color: var(--primary-brown);
        font-weight: 600;
    }

    .input-wrapper {
        position: relative;
        flex: 1;
    }

    .filter-input {
        width: 100%;
        padding: 8px 35px 8px 8px;
        border: 1px solid #C19A6B;
        border-radius: 4px;
        height: 34px;
        cursor: pointer;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.7);
    }

    .filter-input:hover {
        border-color: var(--accent-blue);
        box-shadow: 0 0 0 2px rgba(26, 58, 89, 0.2);
    }

    .delete-btn {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: #999;
        cursor: pointer;
        font-size: 16px;
        display: none;
    }

    .delete-btn:hover {
        color: var(--accent-red);
    }

    .has-value .delete-btn {
        display: block;
    }



    /* 5. 模态框样式 */
    .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.4);
    }

    .modal-content {
        background-color: var(--light-bg);
        margin: 15% auto;
        padding: 20px;
        border: 2px solid var(--primary-brown);
        width: 80%;
        max-width: 500px;
        border-radius: 10px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    }

    .modal-content h3 {
        color: var(--primary-green);
        border-bottom: 1px dashed #C19A6B;
        padding-bottom: 10px;
        font-family: "Noto Serif SC", serif;
    }

    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover {
        color: var(--accent-red);
        cursor: pointer;
    }

    .people-group, .hotel-group, .preference-group {
        margin: 15px 0;
        line-height: 2;
    }

    .confirm-btn {
        margin-top: 15px;
        padding: 8px 16px;
        background: var(--accent-blue);
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background 0.3s;
    }

    .confirm-btn:hover {
        background: #14293d;
    }

    .preference-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .confirm-filter-btn {
        width: 80px;
        padding: 15px;
        background-image: linear-gradient(to bottom, #A67C52, var(--primary-brown));
        color: white;
        border: 1px solid #794426;
        border-radius: 6px;
        cursor: pointer;
        text-align: center;
        transition: all 0.3s;
    }

    .confirm-filter-btn:hover {
        background-image: linear-gradient(to bottom, #B8860B, #CD853F);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    .clear-search-btn {
        background-color: var(--accent-red);
        color: white;
        border: none;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        padding: 0;
        cursor: pointer;
        text-align: center;
        margin-left: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 6. 结果展示区域样式 */
    .results-container {
        margin: 20px auto;
        width: 70%;
        padding-bottom: 200px;
    }

    .result-item {
        border: 1px solid #E0D8C0;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
        background-image:
          linear-gradient(to bottom, var(--light-bg), transparent),
          url("{% static 'img/paper-texture.jpg' %}"); /* 宣纸纹理 */
        box-shadow: 0 3px 10px rgba(139, 69, 19, 0.1);
    }

    .result-title {
        font-size: 22px;
        font-weight: bold;
        margin-bottom: 10px;
        color: var(--primary-green);
        font-family: "Ma Shan Zheng", cursive;
        letter-spacing: 0.5px;
    }

    .result-details {
        color: #5D4037;
        font-size: 14px;
        line-height: 1.6;
    }

    .no-results {
        text-align: center;
        padding: 50px 0;
        color: #8D6E63;
    }
</style>
{% endblock %}

{% block content %}
<!-- Flex父容器：左侧筛选框，右侧AI推荐 -->
<div class="filter-and-recommend-container">
    <!-- 筛选框容器（左侧） -->
    <div class="filter-container">
        <div class="filter-row">
            <span class="filter-label">开始日期</span>
            <div class="input-wrapper" id="dateWrapper">
                <input type="text" class="filter-input" id="dateInput" placeholder="未选择开始日期" readonly onclick="showModal('dateModal')">
                <button class="delete-btn" onclick="clearValue('date')">&times;</button>
            </div>
        </div>
        <div class="filter-row">
            <span class="filter-label">结束日期</span>
            <div class="input-wrapper" id="endDateWrapper">
                <input type="text" class="filter-input" id="endDateInput" placeholder="未选择结束日期" readonly onclick="showModal('endDateModal')">
                <button class="delete-btn" onclick="clearValue('endDate')">&times;</button>
            </div>
        </div>
        <div class="filter-row">
            <span class="filter-label">出发地</span>
            <div class="input-wrapper" id="startWrapper">
                <input type="text" class="filter-input" id="startInput" placeholder="未选择出发地" readonly onclick="showModal('startModal')">
                <button class="delete-btn" onclick="clearValue('start')">&times;</button>
            </div>
        </div>
        <div class="filter-row">
            <span class="filter-label">目的地</span>
            <div class="input-wrapper" id="endWrapper">
                <input type="text" class="filter-input" id="endInput" placeholder="未选择目的地" readonly onclick="showModal('endModal')">
                <button class="delete-btn" onclick="clearValue('end')">&times;</button>
            </div>
        </div>
        <div class="filter-row">
            <span class="filter-label">人数</span>
            <div class="input-wrapper" id="peopleWrapper">
                <input type="text" class="filter-input" id="peopleInput" placeholder="未选择人数" readonly onclick="showModal('peopleModal')">
                <button class="delete-btn" onclick="clearValue('people')">&times;</button>
            </div>
        </div>
        <div class="filter-row">
            <span class="filter-label">酒店等级</span>
            <div class="input-wrapper" id="hotelWrapper">
                <input type="text" class="filter-input" id="hotelInput" placeholder="未选择酒店等级" readonly onclick="showModal('hotelModal')">
                <button class="delete-btn" onclick="clearValue('hotel')">&times;</button>
            </div>
        </div>
        <div class="filter-row">
            <span class="filter-label">偏好</span>
            <div class="preference-actions">
                <div class="input-wrapper" id="preferenceWrapper">
                    <input type="text" class="filter-input" id="preferenceInput" placeholder="未选择偏好" readonly onclick="showModal('preferenceModal')">
                    <button class="delete-btn" onclick="clearValue('preference')">&times;</button>
                </div>
                <button class="confirm-filter-btn" onclick="confirmFiltersToSearch()">确认</button>
            </div>
        </div>
    </div>

    <!-- AI推荐线路（右侧） -->
    <div class="slider">
        <div class="routes">
            <a>AI推荐路线:</a>
            <a href="javascript:;">凤凰古城-张家界5日游</a>
            <a href="javascript:;">芙蓉镇-德夯苗寨3日游</a>
            <a href="javascript:;">湘西深度文化7日游</a>
            <a href="javascript:;">张家界-天门山2日游</a>
            <a href="javascript:;">查看更多推荐</a>
        </div>
    </div>
</div>

<!-- 各模态框 -->
<div class="modal" id="dateModal">
    <div class="modal-content">
        <span class="close" onclick="closeModal('dateModal')">&times;</span>
        <input type="date" id="datePicker">
        <button class="confirm-btn" onclick="confirmDate()">确认</button>
    </div>
</div>
<div class="modal" id="endDateModal">
    <div class="modal-content">
        <span class="close" onclick="closeModal('endDateModal')">&times;</span>
        <input type="date" id="endDatePicker">
        <button class="confirm-btn" onclick="confirmEndDate()">确认</button>
    </div>
</div>
<div class="modal" id="startModal">
    <div class="modal-content">
        <span class="close" onclick="closeModal('startModal')">&times;</span>
        <h3>选择出发地</h3>
        <select id="startCity">
            <option>北京</option><option>上海</option><option>广州</option><option>深圳</option>
        </select>
        <button class="confirm-btn" onclick="confirmStart()">确认</button>
    </div>
</div>
<div class="modal" id="endModal">
    <div class="modal-content">
        <span class="close" onclick="closeModal('endModal')">&times;</span>
        <h3>选择目的地</h3>
        <select id="endCity">
            <option>凤凰古城</option><option>张家界</option><option>芙蓉镇</option><option>德夯苗寨</option>
        </select>
        <button class="confirm-btn" onclick="confirmEnd()">确认</button>
    </div>
</div>
<div class="modal" id="peopleModal">
    <div class="modal-content">
        <span class="close" onclick="closeModal('peopleModal')">&times;</span>
        <h3>选择人数</h3>
        <div class="people-group">
            <p>儿童：<button onclick="changeCount('child', -1)">-</button><span id="childCount">0</span><button onclick="changeCount('child', 1)">+</button></p>
            <p>成人：<button onclick="changeCount('adult', -1)">-</button><span id="adultCount">0</span><button onclick="changeCount('adult', 1)">+</button></p>
            <p>老人：<button onclick="changeCount('senior', -1)">-</button><span id="seniorCount">0</span><button onclick="changeCount('senior', 1)">+</button></p>
        </div>
        <button class="confirm-btn" onclick="confirmPeople()">确认</button>
    </div>
</div>
<div class="modal" id="hotelModal">
    <div class="modal-content">
        <span class="close" onclick="closeModal('hotelModal')">&times;</span>
        <h3>选择酒店等级</h3>
        <div class="hotel-group">
            <label><input type="radio" name="hotel" value="2">二星</label>
            <label><input type="radio" name="hotel" value="3">三星</label>
            <label><input type="radio" name="hotel" value="4">四星</label>
            <label><input type="radio" name="hotel" value="5">五星</label>
        </div>
        <button class="confirm-btn" onclick="confirmHotel()">确认</button>
    </div>
</div>
<div class="modal" id="preferenceModal">
    <div class="modal-content">
        <span class="close" onclick="closeModal('preferenceModal')">&times;</span>
        <h3>选择偏好</h3>
        <div class="preference-group">
            <p>旅行类型：<label><input type="radio" name="tripType" value="comfort">舒适游</label><label><input type="radio" name="tripType" value="budget">穷游</label></p>
            <p>交通方式：<label><input type="checkbox" name="transport" value="flight">飞机</label><label><input type="checkbox" name="transport" value="train">火车</label><label><input type="checkbox" name="transport" value="highSpeed">高铁</label><label><input type="checkbox" name="transport" value="bus">汽车</label></p>
        </div>
        <button class="confirm-btn" onclick="confirmPreference()">确认</button>
    </div>
</div>

<!-- 搜索容器 -->
<div class="search-container">
    <textarea class="search-input" id="searchInput" placeholder="筛选条件将显示在这里或者直接输入搜索内容..." rows="3"></textarea>
    <button class="search-btn" onclick="handleSearch()">搜索</button>
    <button class="clear-search-btn" onclick="clearSearchBox()">×</button>
</div>

<!-- 结果展示区域 -->
<div class="results-container" id="resultsContainer">
    <!-- 搜索结果将通过JS动态插入这里 -->
</div>
{% endblock %}

{% block extra_js %}
<script>
    // 存储用户选择的结果
    let userSelections = {
        date: '',
        endDate: '',
        start: '',
        end: '',
        people: '',
        hotel: '',
        preference: ''
    };

    // 湘西旅游产品模拟数据
    const travelPackages = [
        {
            id: 1,
            title: "凤凰古城三日游",
            start: "北京",
            end: "凤凰古城",
            date: "2023-10-15",
            endDate: "2023-10-17",
            people: "儿童: 1, 成人: 2, 老人: 0",
            hotel: "四星",
            preference: "旅行类型: 舒适游, 交通: 高铁",
            details: "包含3天2晚吊脚楼民宿，沱江泛舟，苗寨体验，沈从文故居参观"
        },
        {
            id: 2,
            title: "张家界徒步探险",
            start: "上海",
            end: "张家界",
            date: "2023-10-20",
            endDate: "2023-10-23",
            people: "儿童: 0, 成人: 1, 老人: 0",
            hotel: "三星",
            preference: "旅行类型: 穷游, 交通: 火车",
            details: "经济实惠的徒步之旅，含2天住宿，袁家界、天子山核心景区游览"
        },
        {
            id: 3,
            title: "芙蓉镇夜景专线",
            start: "广州",
            end: "芙蓉镇",
            date: "2023-10-15",
            endDate: "2023-10-18",
            people: "儿童: 0, 成人: 3, 老人: 1",
            hotel: "五星",
            preference: "旅行类型: 舒适游, 交通: 高铁, 汽车",
            details: "体验千年古镇夜景，瀑布酒店住宿，土家风情表演"
        },
        {
            id: 4,
            title: "德夯苗寨文化体验",
            start: "深圳",
            end: "德夯苗寨",
            date: "2023-10-25",
            endDate: "2023-10-28",
            people: "儿童: 2, 成人: 2, 老人: 1",
            hotel: "四星",
            preference: "旅行类型: 舒适游, 交通: 飞机",
            details: "苗族银饰制作体验，拦门酒仪式，篝火晚会，含4天3晚住宿"
        }
    ];

    // 模态框控制函数
    function showModal(modalId) {
        document.getElementById(modalId).style.display = 'block';
    }

    function closeModal(modalId) {
        document.getElementById(modalId).style.display = 'none';
    }

    // 人数调整函数
    function changeCount(type, delta) {
        const countEl = document.getElementById(`${type}Count`);
        let count = parseInt(countEl.textContent) + delta;
        count = Math.max(count, 0);
        countEl.textContent = count;
    }

    // 搜索处理函数
    function handleSearch() {
        const input = document.getElementById('searchInput').value.trim();
        if (input) {
            // 过滤并显示结果
            const results = filterTravelPackages(userSelections);
            displayResults(results);
        }
    }

    // 筛选旅游产品
    function filterTravelPackages(filters) {
        return travelPackages.filter(pkg => {
            if (filters.date && pkg.date !== filters.date) {
                return false;
            }

            if (filters.endDate && pkg.endDate !== filters.endDate) {
                return false;
            }

            if (filters.start && pkg.start !== filters.start) {
                return false;
            }

            if (filters.end && pkg.end !== filters.end) {
                return false;
            }

            if (filters.hotel && pkg.hotel !== filters.hotel) {
                return false;
            }

            if (filters.preference) {
                const tripTypeMatch = !filters.preference.includes('旅行类型') ||
                                     pkg.preference.includes(filters.preference.split('旅行类型: ')[1]?.split(',')[0] || '');

                const transportMatch = !filters.preference.includes('交通') ||
                                     filters.preference.split('交通: ')[1]?.split(',').every(t =>
                                         pkg.preference.includes(t.trim())
                                     );

                if (!tripTypeMatch || !transportMatch) {
                    return false;
                }
            }

            return true;
        });
    }

    // 显示筛选结果
    function displayResults(results) {
        const container = document.getElementById('resultsContainer');
        container.innerHTML = '';

        if (results.length === 0) {
            container.innerHTML = '<div class="no-results">没有找到匹配的结果，请尝试调整筛选条件</div>';
            return;
        }

        results.forEach(pkg => {
            const item = document.createElement('div');
            item.className = 'result-item';
            item.innerHTML = `
                <div class="result-title">${pkg.title}</div>
                <div class="result-details">
                    <p>出发地: ${pkg.start} | 目的地: ${pkg.end}</p>
                    <p>日期: ${pkg.date} - ${pkg.endDate} | 酒店等级: ${pkg.hotel}</p>
                    <p>人数: ${pkg.people}</p>
                    <p>偏好: ${pkg.preference}</p>
                    <p>详情: ${pkg.details}</p>
                </div>
            `;
            container.appendChild(item);
        });
    }

    // 确认筛选条件并显示到搜索框
    function confirmFiltersToSearch() {
        const searchInput = document.getElementById('searchInput');
        searchInput.value = '';

        const filterValues = [];
        const labels = {
            date: '开始日期',
            endDate: '结束日期',
            start: '出发地',
            end: '目的地',
            people: '人数',
            hotel: '酒店等级',
            preference: '偏好'
        };

        for (const key in userSelections) {
            if (userSelections[key]) {
                filterValues.push(`${labels[key]}: ${userSelections[key]}`);
            }
        }

        // 添加固定文本
        const fixedText = "\n\n湘西旅游线路攻略推荐";

        if (filterValues.length > 0) {
            searchInput.value = filterValues.join('\n') + fixedText;
        } else {
            searchInput.value = '未选择任何筛选条件' + fixedText;
        }
    }

    // 清除选择的值
    function clearValue(type) {
        const input = document.getElementById(`${type}Input`);
        const wrapper = document.getElementById(`${type}Wrapper`);

        input.value = input.placeholder;
        userSelections[type] = '';
        wrapper.classList.remove('has-value');

        if (type === 'people') {
            document.getElementById('childCount').textContent = '0';
            document.getElementById('adultCount').textContent = '0';
            document.getElementById('seniorCount').textContent = '0';
        }

        if (type === 'hotel') {
            document.querySelectorAll('input[name="hotel"]').forEach(radio => {
                radio.checked = false;
            });
        }

        if (type === 'preference') {
            document.querySelectorAll('input[name="tripType"]').forEach(radio => {
                radio.checked = false;
            });
            document.querySelectorAll('input[name="transport"]').forEach(checkbox => {
                checkbox.checked = false;
            });
        }
    }

    // 确认日期选择
    function confirmDate() {
        const date = document.getElementById('datePicker').value;
        if (date) {
            document.getElementById('dateInput').value = date;
            userSelections.date = date;
            document.getElementById('dateWrapper').classList.add('has-value');
        }
        closeModal('dateModal');
    }

    // 其他确认函数保持不变...
    function confirmEndDate() {
        const endDate = document.getElementById('endDatePicker').value;
        if (endDate) {
            document.getElementById('endDateInput').value = endDate;
            userSelections.endDate = endDate;
            document.getElementById('endDateWrapper').classList.add('has-value');
        }
        closeModal('endDateModal');
    }

    function confirmStart() {
        const start = document.getElementById('startCity').value;
        document.getElementById('startInput').value = start;
        userSelections.start = start;
        document.getElementById('startWrapper').classList.add('has-value');
        closeModal('startModal');
    }

    function confirmEnd() {
        const end = document.getElementById('endCity').value;
        document.getElementById('endInput').value = end;
        userSelections.end = end;
        document.getElementById('endWrapper').classList.add('has-value');
        closeModal('endModal');
    }

    function confirmPeople() {
        const child = document.getElementById('childCount').textContent;
        const adult = document.getElementById('adultCount').textContent;
        const senior = document.getElementById('seniorCount').textContent;
        let text = `儿童: ${child}, 成人: ${adult}, 老人: ${senior}`;
        document.getElementById('peopleInput').value = text;
        userSelections.people = text;
        document.getElementById('peopleWrapper').classList.add('has-value');
        closeModal('peopleModal');
    }

    function confirmHotel() {
        const hotels = document.getElementsByName('hotel');
        let selected = '';
        hotels.forEach(hotel => {
            if (hotel.checked) {
                selected = hotel.value + '星';
            }
        });
        if (selected) {
            document.getElementById('hotelInput').value = selected;
            userSelections.hotel = selected;
            document.getElementById('hotelWrapper').classList.add('has-value');
        }
        closeModal('hotelModal');
    }

    function confirmPreference() {
        const tripTypes = document.getElementsByName('tripType');
        let tripType = '';
        tripTypes.forEach(type => {
            if (type.checked) {
                tripType = type.value === 'comfort' ? '舒适游' : '穷游';
            }
        });

        const transports = document.getElementsByName('transport');
        let transportArr = [];
        transports.forEach(transport => {
            if (transport.checked) {
                switch(transport.value) {
                    case 'flight': transportArr.push('飞机'); break;
                    case 'train': transportArr.push('火车'); break;
                    case 'highSpeed': transportArr.push('高铁'); break;
                    case 'bus': transportArr.push('汽车'); break;
                }
            }
        });

        let text = '';
        if (tripType) text += `旅行类型: ${tripType}`;
        if (transportArr.length > 0) {
            text += (text ? ', ' : '') + `交通: ${transportArr.join(', ')}`;
        }

        document.getElementById('preferenceInput').value = text || '未选择偏好';
        userSelections.preference = text || '';
        if (text) {
            document.getElementById('preferenceWrapper').classList.add('has-value');
        }
        closeModal('preferenceModal');
    }

    // 点击模态框外部关闭模态框
    window.onclick = function(event) {
        const modals = document.getElementsByClassName('modal');
        for (let i = 0; i < modals.length; i++) {
            const modal = modals[i];
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    }

    // 清除搜索框内容
    function clearSearchBox() {
        document.getElementById('searchInput').value = '';
    }
</script>
{% endblock %}
